import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Carousel, message,Statistic, Row, Col, Button} from 'antd'
import { GetApi } from '../../../api/request'

import { clearAllLocalStorage } from '../../../utils/utils'

import './home.less'

class Home extends Component {
    state = {
        swiper: []
    }
    componentDidMount = async () => {
        let res = await GetApi('/swiper')
        if (res.data.code === 205) {
            message.destroy();
            message.warning({ content: res.data.msg, duration: 3 });
            clearAllLocalStorage()
            this.props.history.push('/login')
        } else {
            if (res.data.code === 200) {
                let swiper = res.data.data.split(',')
                this.setState({ swiper })
            }
        }
    }

    render() {
        return (
            <div>
                <Carousel autoplay>
                    {
                        this.state.swiper.map(swiper => { return (<img style={{ height: "100%" }} src={swiper} key={swiper} alt={swiper} />) })
                    }
                </Carousel>
                <Row gutter={16}>
                    <Col span={12}>
                        <Statistic title="" value={112893} />
                    </Col>
                    <Col span={12}>
                        <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
                        <Button style={{ marginTop: 16 }} type="primary">
                            Recharge
                        </Button>
                    </Col>
                    <Col span={12}>
                        <Statistic title="Active Users" value={112893} loading />
                    </Col>
                </Row>
            </div>
        )
    }

}

export default withRouter(Home)